import './index.scss';
import React, { useEffect, useState, useRef } from "react";
import { user_query_token, user_import_token } from '@/utils/mixin.ts'
import { Button, Input, Form, message, Spin} from 'antd';
import { useTranslation } from "react-i18next";

const NewWallet = ({ onCallback }) => {
    const { t } = useTranslation();
    const [token_address , set_token_address] = useState('')
    const [spinning, setSpinning] = React.useState(false);
    // 使用 useRef 来保存输入框的值
    const inputRef = useRef(null);
    const [info, setInfo] = useState(null)
    useEffect(() => {
        if(!token_address) return
        // 定义一个定时器，延迟调用接口
        const timer = setTimeout(() => {
            get_user_query_token();
        }, 500); // 设置延迟时间，可以根据实际情况调整

        // 在下一次 useEffect 调用前清除定时器，确保只有最后一次输入结束后才调用接口
        return () => clearTimeout(timer);
    }, [token_address]); // 监听 token_address 的变化


    const get_user_query_token = () => {
        setSpinning(true);
        user_query_token({
            network: localStorage.getItem('keyNode'),
            token_address
        }).then(res => {
            setSpinning(false);
            
            if(res.code == 0) {
                setInfo(res.data)
            }else {
                message.error(t('Address Error'))
            }
        }).catch(err => {
            setSpinning(false);
            
        })
    }

    const handleInputChange = (e) => {
        // 更新 token_address 的值
        set_token_address(e.target.value);
    }

    const submit = (val) => {
        if(!token_address) return message.error('请输入地址')
        setSpinning(true);
        user_import_token({
            network: localStorage.getItem('keyNode'),
            token_address,
            email: localStorage.getItem('email'),
            wallet_id: localStorage.getItem('wallet_id'),
        }).then(res => {
            if(res.code == 0) {
                message.success(t('Import was successful'))
            }else if(res.msg == 'native_and_usdt_not_need_import') {
                message.error(t('BNB and USDT do not require import'))
            }
            else {
                message.error(res.msg)
            }
            
            setSpinning(false);
            onCallback(false);
        }).catch(err => {
            setSpinning(false);
            onCallback(false);
        })
    }
    return (
        <div className="importToken">
            <Spin spinning={spinning} fullscreen />
            <div className="header">
                <span className='title'>{t('Import Tokens')}</span>
                <div className="illustrate">{t("CreateToken")}</div>
            </div>
            <div className="content">
                <Form>
                    <Form.Item
                        label={t("TokenAddress")}
                        
                    >
                        <Input ref={inputRef} value={token_address} onChange={handleInputChange} placeholder='ox...' />
                    </Form.Item>
                    <Form.Item
                        label={t("TokenSymbols")}
                    >
                        <Input value={info && info.token_name} placeholder='TUT' />
                    </Form.Item>
                    <Form.Item
                        label={t("TokenDecimal")}
                    >
                        <Input value={info && info.token_decimals} placeholder='18' />
                    </Form.Item>
                </Form>
                <div className="button">
                    <Button onClick={() => {onCallback(false);}}>{t("Cancel")}</Button>
                    <Button onClick={() => {submit()}} type="primary">{t("Submit")}</Button>
                </div>
            </div>
        </div>
    )

}

export default NewWallet;